import React, { useMemo } from 'react';
import { Table, Spin, Alert } from 'antd';
import { useSelector } from 'react-redux';
import { selectAccounts, selectLoading, selectError } from '../reducers/accountReducer';

// 定义账户数据类型
interface Account {
  id: string;      // 账户 ID
  name: string;    // 账户名称
  balance: number; // 账户余额
}

const AccountList: React.FC = () => {
  const accounts = useSelector(selectAccounts); // 从 Redux store 中选择账户数据
  const loading = useSelector(selectLoading);   // 从 Redux store 中选择加载状态
  const error = useSelector(selectError);       // 从 Redux store 中选择错误状态

  // 使用 useMemo 定义表格列，优化性能
  const columns = useMemo(() => [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '余额',
      dataIndex: 'balance',
      key: 'balance',
      render: (balance: number) => `$${balance.toFixed(2)}`, // 格式化余额为货币形式
    },
  ], []);

  // 渲染加载状态
  const renderLoading = () => <Spin tip="加载中..." />;

  // 渲染错误状态
  const renderError = () => (
    <Alert 
      message="错误" 
      description={typeof error === 'string' ? error : "发生错误"} 
      type="error" 
    />
  );

  // 渲染账户信息或提示
  const renderContent = () => {
    if (accounts.length > 0) {
      return (
        <Table
          dataSource={accounts}  // 设置表格数据源
          columns={columns}      // 设置表格列
          rowKey="id"            // 设置行的唯一键
          pagination={{ pageSize: 10 }} // 分页配置
        />
      );
    }
    return <Alert message="暂无账户信息" type="info" />; // 显示没有账户信息的提示
  };

  return (
    <div>
      {loading && renderLoading()}  {/* 显示加载状态 */}
      {error ? renderError() : !loading && renderContent()} {/* 显示错误或账户信息 */}
    </div>
  );
};

export default AccountList;
